<nb-auth-block>
    <h2 class="title">注册</h2>
    <form (ngSubmit)="register()" #form="ngForm">

        <div *ngIf="showMessages.error && errors && errors.length > 0 && !submitted" class="alert alert-danger" role="alert">
            <div>
                <strong>Oh snap!</strong>
            </div>
            <div *ngFor="let error of errors">{{ error }}</div>
        </div>
        <div *ngIf="showMessages.success && messages && messages.length > 0 && !submitted" class="alert alert-success" role="alert">
            <div>
                <strong>万岁</strong>
            </div>
            <div *ngFor="let message of messages">{{ message }}</div>
        </div>

        <div class="form-group">
            <label for="input-name" class="sr-only">全名</label>
            <input name="fullName" [(ngModel)]="user.fullName" id="input-name" #fullName="ngModel" class="form-control" placeholder="全名"
                [class.form-control-danger]="fullName.invalid && fullName.touched" [required]="true" [minlength]="2" [maxlength]="50"
                autofocus>
            <small class="form-text error" *ngIf="fullName.invalid && fullName.touched && fullName.errors?.required">
                全名必填！
            </small>
            <small class="form-text error" *ngIf="fullName.invalid && fullName.touched && (fullName.errors?.minlength || fullName.errors?.maxlength)">
                全名为2到50个字符！
            </small>
        </div>

        <div class="form-group">
            <label for="input-email" class="sr-only">邮箱</label>
            <input name="email" [(ngModel)]="user.email" id="input-email" #email="ngModel" class="form-control" placeholder="邮箱"
                pattern=".+@.+\..+" [class.form-control-danger]="email.invalid && email.touched" [required]="true">
            <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
               邮箱必填！
            </small>
            <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.pattern">
                邮箱格式不对！
            </small>
        </div>

        <div class="form-group">
            <label for="input-password" class="sr-only">密码</label>
            <input name="password" [(ngModel)]="user.password" type="password" id="input-password" class="form-control" placeholder="密码"
                #password="ngModel" [class.form-control-danger]="password.invalid && password.touched" [required]="true" [minlength]="6"
                [maxlength]="18">
            <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
                密码必填！
            </small>
            <small class="form-text error" *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
                密码6到18个字符！
            </small>
        </div>

        <div class="form-group">
            <label for="input-re-password" class="sr-only">再次输入密码</label>
            <input name="rePass" [(ngModel)]="user.confirmPassword" type="password" id="input-re-password" class="form-control" placeholder="确认密码"
                #rePass="ngModel" [class.form-control-danger]="(rePass.invalid || password.value != rePass.value) && rePass.touched"
                [required]="true">
            <small class="form-text error" *ngIf="rePass.invalid && rePass.touched && rePass.errors?.required">
                确认密码是必需的！
            </small>
            <small class="form-text error" *ngIf="rePass.touched && password.value != rePass.value && !rePass.errors?.required">
                密码与确认密码不匹配！
            </small>
        </div>

        <div class="form-group accept-group col-sm-12" *ngIf="true">
            <nb-checkbox name="terms" [(ngModel)]="user.terms" [required]="true">
                同意
                <a href="#" target="_blank">
                    <strong>条款和条件</strong>
                </a>
            </nb-checkbox>
        </div>

        <button [disabled]="submitted || !form.valid" class="btn btn-block btn-hero-success" [class.btn-pulse]="submitted">
            注册
        </button>
    </form>

    <div class="links">
        <small class="form-text">
            已经有账号了？
            <a routerLink="../login">
                <strong>登陆</strong>
            </a>
        </small>
    </div>
</nb-auth-block>